<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>原神</title>
    <script src="https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>
    <script src="js/index.js"></script>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="box">
    <div class="header">
        <img class="logo" src="image/cb17b14568e4435118989c4fb9bcb34c_4246205577266821736.png" alt="">
        <div class="download">
            <a href="#"><img src="image/pcdown.png" alt=""></a>
            <a href="#"><img src="image/coluddown.png" alt=""></a>
        </div>
        <div class="official">
            <img src="image/official.png" alt="">
            <img src="image/official2.png" alt="">
        </div>
        <div class="play">
            <img src="image/8f0169ca177f302f9d98da8f7bf0e9c2_133095336659442459.png" alt="">
        </div>
        <div class="video">
            <div class="video-box">
                <video controls  src="https://webstatic.mihoyo.com/upload/static-resource/2022/02/04/332e64808dad91fb73a35adfa07cbf44_4349619459033207841.mp4"></video>
            </div>
        </div>
        <div class="remind-box">
            <img class="remind-logo" src="image/52509ad6b6ff8f4236c853e39439896e_7687676181698699151.png" alt="">
            <div class="remind-bg">
                <div class="remind-content">
                    <img class="remind-close" src="image/cf76b2e566b7e1a132e470cd465b71c3_3970418835981795384.png" alt="">
                </div>
            </div>
        </div>
        <div class="scroll">
            <img src="image/49c3e13c5348cad8fd0b17741a6412cb_1226294694983390980.png" alt="">
        </div>
    </div>
    <main class="main">
        <div class="three-worlds"></div>
        <div class="role-info">
            <ul class="role-wrap">
                <li>
                    <div class="cv">
                        <div class="ccv">
                            <img src="image/item1ccv.png" alt="">
                            <img src="image/hitem1ccv.png" alt="">
                        </div>
                        <div class="jcv">
                            <img src="image/item1jcv.png" alt="">
                            <img src="image/hitem1jcv.png" alt="">
                        </div>
                    </div>
                    <div class="role-video">
                        <img src="image/ff3b27f1f340df08ab6ff1ee603f09e9_2761353215341017809.png" alt="">
                        <div class="play">
                            <img src="image/8f0169ca177f302f9d98da8f7bf0e9c2_133095336659442459.png" alt="">
                        </div>
                    </div>
                </li>
                <li>
                    <div class="cv">
                        <div class="ccv">
                            <img src="image/item1ccv.png" alt="">
                            <img src="image/hitem1ccv.png" alt="">
                        </div>
                        <div class="jcv">
                            <img src="image/item1jcv.png" alt="">
                            <img src="image/hitem1jcv.png" alt="">
                        </div>
                    </div>
                    <div class="role-video">
                        <img src="image/214711cfb32fd655b7cde0c0c1a708d0_1019189738819386779.png" alt="">
                        <div class="play">
                            <img src="image/8f0169ca177f302f9d98da8f7bf0e9c2_133095336659442459.png" alt="">
                        </div>
                    </div>
                </li>
                <li>
                    <div class="cv">
                        <div class="ccv">
                            <img src="image/item1ccv.png" alt="">
                            <img src="image/hitem1ccv.png" alt="">
                        </div>
                        <div class="jcv">
                            <img src="image/item1jcv.png" alt="">
                            <img src="image/hitem1jcv.png" alt="">
                        </div>
                    </div>
                    <div class="role-video">
                        <img src="image/7a1e3242d69553f6177adfb417ccdbbe_322173836615656825.png" alt="">
                        <div class="play">
                            <img src="image/8f0169ca177f302f9d98da8f7bf0e9c2_133095336659442459.png" alt="">
                        </div>
                    </div>
                </li>
                <ul class="role-list">
                    <li>
                        <img src="image/portrait1.png" alt="">
                        <img src="image/hportrait1.png" alt="">
                    </li>
                    <li>
                        <img src="image/portrait2.png" alt="">
                        <img src="image/hportrait2.png" alt="">
                    </li>
                    <li>
                        <img src="image/portrait3.png" alt="">
                        <img src="image/hportrait3.png" alt="">
                    </li>
                </ul>
            </ul>
            <div class="decorate">
                <img src="image/937354a5fb52ce7f550a78ae9009f8c3_4438796098064012658.png" alt="">
            </div>
            <div class="video">
                <div class="video-box">
                    <video controls src=""></video>
                </div>
            </div>
        </div>
        <div class="new-monster">
            <div class="monster-info">
                <div class="monster-video">
                    <div class="monster-video-box">
                        <video loop autoplay muted src="https://uploadstatic.mihoyo.com/puzzle/upload/puzzle/2022/02/11/e58ed0008e777b87e45bc75235790c58_6706036807749258212.mp4"></video>
                    </div>
                </div>
                <img class="info1" src="image/6dd8906fa8087379662db017e1fd4b90_6785686055473901856.png" alt="">
                <img class="info2" src="image/6f96c1a3c30771d0c36ec6dccab57d90_6785686055473901856.png" alt="">
            </div>
            <div class="monster1">
                <img src="image/monster1.png" alt="">
                <img src="image/hmonster1.png" alt="">
            </div>
            <div class="monster2">
                <img src="image/monster2.png" alt="">
                <img src="image/hmonster2.png" alt="">
            </div>
            <div class="decorate">
                <img src="image/f817332ea15bc3f22f244261336cf8d1_4293194931555736125.png" alt="">
            </div>
        </div>
        <div class="more-activity">
            <div class="activity-wrap">
                <div class="activity-title">
                    <img src="image/activity1.png" alt="">
                    <img src="image/hactivity1.png" alt="">
                </div>
                <div class="activity-content"></div>
                <div class="activity-title">
                    <img src="image/activity2.png" alt="">
                    <img src="image/hactivity2.png" alt="">
                </div>
                <div class="activity-content"></div>
                <div class="activity-title">
                    <img src="image/activity3.png" alt="">
                    <img src="image/hactivity3.png" alt="">
                </div>
                <div class="activity-content"></div>
            </div>
            <div class="decorate">
                <img src="image/5191db7db3c0d605c6069463a3f39359_6020276117697708377.png" alt="">
            </div>
        </div>
        <div class="feature">
            <div class="feature-wrap">
                <div class=" swipe1"></div>
                <div class=" swipe2"></div>
                <div class=" swipe3"></div>
                <div class=" swipe4"></div>
                <div class=" swipe5"></div>
                <div class=" swipe6"></div>
            </div>
            <div class="turn">
                <div class="prev">
                    <img src="image/985cd3092733c9e862c6d2a41ceaf6cf_9151636454784645619.png" alt="">
                    <img src="image/left.png" alt="">
                </div>
                <div class="next">
                    <img src="image/30c57282fd4ee27cdc455e78f3c58e88_4235691643004612761.png" alt="">
                    <img src="image/right.png" alt="">
                </div>
            </div>
            <ul class="swipe-index">
                <li>
                    <img src="image/5c36406f091549c46d0e1c724bcca5b0_5868951344828392096.png" alt="">
                    <img src="image/hswipeindex.png" alt="">
                </li>
                <li>
                    <img src="image/5c36406f091549c46d0e1c724bcca5b0_5868951344828392096.png" alt="">
                    <img src="image/hswipeindex.png" alt="">
                </li>
                <li>
                    <img src="image/5c36406f091549c46d0e1c724bcca5b0_5868951344828392096.png" alt="">
                    <img src="image/hswipeindex.png" alt="">
                </li>
                <li>
                    <img src="image/5c36406f091549c46d0e1c724bcca5b0_5868951344828392096.png" alt="">
                    <img src="image/hswipeindex.png" alt="">
                </li>
                <li>
                    <img src="image/5c36406f091549c46d0e1c724bcca5b0_5868951344828392096.png" alt="">
                    <img src="image/hswipeindex.png" alt="">
                </li>
                <li>
                    <img src="image/5c36406f091549c46d0e1c724bcca5b0_5868951344828392096.png" alt="">
                    <img src="image/hswipeindex.png" alt="">
                </li>
            </ul>
            <div class="focus">
                <div class="micorblog">
                    <img src="image/78dacc5ded7ac80e1d3d1c391e8e9d77_6748148605783599045.png" alt="">
                    <img src="image/h78dacc5ded7ac80e1d3d1c391e8e9d77_6748148605783599045.png" alt="">
                </div>
                <div class="wechat">
                    <img src="image/d94ac78f38044ff9450f46a611a7b057_5015250897646493500.png" alt="">
                    <img src="image/hd94ac78f38044ff9450f46a611a7b057_5015250897646493500.png" alt="">
                </div>
                <div class="bilibili">
                    <img src="image/89bcd9f5ff191698c89ed7eefff87fe2_3881278790774730465.png" alt="">
                    <img src="image/h89bcd9f5ff191698c89ed7eefff87fe2_3881278790774730465.png" alt="">
                </div>
                <div class="community">
                    <img src="image/3437faa1bd194d6f913e46f6bb4e24d8_4623218889858671161.png" alt="">
                    <img src="image/h3437faa1bd194d6f913e46f6bb4e24d8_4623218889858671161.png" alt="">
                </div>
            </div>
            <div class="decorate">
                <img src="image/d1ca14f09bf50df0988e17e546c8fb71_6020276117697708377.png" alt="">
            </div>
        </div>
        <ul id="sectionIndex">
            <div></div>
        </ul>
    </main>
    <div class="footer">
        <div class="footer-wrap">
            <div class="footer-logo">
                <img class="en-logo" src="image/ed39ba943da56c88dec2b18f4bfb0a32_2315648370550091638.png" alt="">
                <span></span>
                <img class="ch-logo" src="image/ys_1565764084_7084.png" alt="">
            </div>
            <div class="footer-info">
                <ul class="footer-link">
                    <li>
                        <a href="#">用户协议</a>
                    </li>
                    <span>|</span>
                    <li>
                        <a href="#">隐私协议</a>
                    </li>
                    <span>|</span>
                    <li>
                        <a href="#">儿童隐私政策</a>
                    </li>
                    <span>|</span>
                    <li>
                        <a href="#">自律公约</a>
                    </li>
                    <span>|</span>
                    <li>
                        <a href="#">家长监护工程</a>
                    </li>
                    <span>|</span>
                    <li>
                        <a href="#">关于我们</a>
                    </li>
                    <span>|</span>
                    <li>
                        <a href="#">联系我们</a>
                    </li>
                    <span>|</span>
                    <li>
                        <a href="#">加入我们</a>
                    </li>
                </ul>
                <div class="advice-info">
                    <p>健康游戏忠告：抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。</p>
                    <p>沪公网安备31010402001113号&nbsp;&nbsp;|&nbsp;&nbsp;增值电信业务经营许可证：沪B2-20190555</p>
                    <p>沪ICP备19018275号-4&nbsp;&nbsp;|&nbsp;&nbsp;沪网文 [2019] 3168-216号&nbsp;&nbsp;|&nbsp;&nbsp;国新出审 [2019] 2978号</p>
                    <p>互联网违法不良信息举报邮箱: tousu@mihoyo.com互联网违法不良信息举报电话:&nbsp;021-60371750 ( 工作时间:每天10点- 20点)</p>
                    <p>亲爱的市民朋友，上海警方反诈劝阻电话&nbsp;"962110"&nbsp;系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听</p>
                    <p>未成年成长关爱热线: 021-60371740</p>
                    <p>◎2020米哈游版权所有&nbsp;&nbsp;|&nbsp;&nbsp;上海米哈游影铁科技有限公司 &nbsp;&nbsp;&nbsp;客服电话: 400-666 6312</p>

                </div>
                <div class="footer-icon">
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>